<template>
	<view class="search-blog-container">
		<view class="search-bar-box">
			<my-search :isShowInput="true" :placeholderText="defaultText" v-model="searchVal" :config="{
				backgroundColor: '#f1f0f3'
			}" @search="onSearchConfirm" @focus="onSearchFocus" @blur="onSearchBlur" @clear="onSearchClear"
				@cancel="onSearchCancel" />
		</view>
		<view class="search-hot-list-box card" v-if="showType === HOT_LIST">
			<search-hot-list :hotList="hotList" @onSearch="onSearchConfirm"></search-hot-list>
		</view>
		<view class="search-history-box" v-else-if="showType === SEARCH_HISTORY">
			<search-history :searchData="searchData" @onItemClick="onSearchConfirm"></search-history>
		</view>
		<!-- 搜索结果 -->
		<view class="search-result-box" v-else>
			<search-result-list :queryStr="searchVal" :ref="mescrollItem"></search-result-list>
		</view>
	</view>
</template>

<script>
	import MescrollCompMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js';
	import {
		mapMutations
	} from 'vuex'
	import {
		getDefaultText,
		getSearchHotList
	} from 'api/search.js'
	const HOT_LIST = '0'
	const SEARCH_HISTORY = '1'
	const SEARCH_RESULT = '2'
	export default {
		mixins: [MescrollCompMixin],
		data() {
			return {
				defaultText: '搜索',
				searchVal: '',
				HOT_LIST,
				SEARCH_HISTORY,
				SEARCH_RESULT,
				showType: HOT_LIST,
				hotList: [],
			};
		},
		onLoad() {
			this.loadDefaultText()
			this.getSearchHotList()
		},
		methods: {
			...mapMutations('search', ['saveSearchData']),
			// 获取热搜列表数据
			async getSearchHotList() {
				const {
					data: res
				} = await getSearchHotList()
				this.hotList = res.list
				console.log(this.hotList);
			},
			// 获取推荐搜索文本
			async loadDefaultText() {
				const {
					data: res
				} = await getDefaultText();
				this.defaultText = res.defaultText
			},
			// 搜索内容
			onSearchConfirm(val) {
				this.searchVal = val ? val : this.defaultText
				this.showType = SEARCH_RESULT
				this.saveSearchData(this.searchVal)
			},
			// 获取焦点
			onSearchFocus(val) {
				this.showType = SEARCH_HISTORY
			},
			// 失去焦点
			onSearchBlur(val) {},
			// 清空内容
			onSearchClear(val) {
				this.showType = SEARCH_HISTORY
			},
			// 点击取消
			onSearchCancel(val) {
				this.showType = HOT_LIST
			}
		}
	};
</script>

<style lang="scss" scoped>
	.search-blog-container {
		.search-bar-box {
			background-color: $uni-bg-color;
			padding: $uni-spacing-row-sm;
			position: sticky;
			top: 0px;
			z-index: 9;
		}
	}
</style>
